<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <div v-if="attr">
      <div v-for="(item, key, index) in attr" :key="index">
        <!-- 文本型（text）属性 -->
        <mu-text-field
          v-if="item.type === 'text'"
          :label="key"
          :name="key"
          v-model="item.value"
          @input.native="updateAttribute"
          type="text"
          fullWidth
        />
        <mu-select-field
          v-if="item.type === 'selection'"
          v-model="item.value"
          :label="key"
          @input="updateAttribute"
          style="width: 100%"
        />
        <FormItem :label="key" :prop="key" v-if="item.type === 'text'">
          11111
          <Input v-model="item.value" placeholder="Enter your name"></Input>
        </FormItem>
      </div>
    </div>

    <FormItem label="E-mail" prop="mail">
      <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
    </FormItem>
    <FormItem label="City" prop="city">
      <Select v-model="formValidate.city" placeholder="Select your city">
        <Option value="beijing">New York</Option>
        <Option value="shanghai">London</Option>
        <Option value="shenzhen">Sydney</Option>
      </Select>
    </FormItem>
    <FormItem label="Date">
      <Row>
        <Col span="11">
          <FormItem prop="date">
            <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
          </FormItem>
        </Col>
        <Col span="2" style="text-align: center">-</Col>
        <Col span="11">
          <FormItem prop="time">
            <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
          </FormItem>
        </Col>
      </Row>
    </FormItem>
    <FormItem label="Gender" prop="gender">
      <RadioGroup v-model="formValidate.gender">
        <Radio label="male">Male</Radio>
        <Radio label="female">Female</Radio>
      </RadioGroup>
    </FormItem>
    <FormItem label="Hobby" prop="interest">
      <CheckboxGroup v-model="formValidate.interest">
        <Checkbox label="Eat"></Checkbox>
        <Checkbox label="Sleep"></Checkbox>
        <Checkbox label="Run"></Checkbox>
        <Checkbox label="Movie"></Checkbox>
      </CheckboxGroup>
    </FormItem>
    <FormItem label="Desc" prop="desc">
      <Input
        v-model="formValidate.desc"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 5 }"
        placeholder="Enter something..."
      ></Input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
      <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
    </FormItem>
  </Form>
</template>
<script>
export default {
  name: 'subAttributes',
  data() {
    return {
      attr: {},
    }
  },
  props: {
    attributes: {
      type: Object,
      default: null,
    },
    keyOfAttr: {
      type: String,
      default: null,
    },
  },
  created() {
    this.attr = JSON.parse(JSON.stringify(this.attributes))
  },
  watch: {
    attributes: {
      deep: true,
      handler(val, oldVal) {
        this.attr = JSON.parse(JSON.stringify(val))
      },
    },
  },
  data() {
    return {
      formValidate: {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: '',
      },
      ruleValidate: {
        name: [{ required: true, message: 'The name cannot be empty', trigger: 'blur' }],
        mail: [
          { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' },
        ],
        city: [{ required: true, message: 'Please select the city', trigger: 'change' }],
        gender: [{ required: true, message: 'Please select gender', trigger: 'change' }],
        interest: [
          { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
          { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
        ],
        date: [{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' }],
        time: [{ required: true, type: 'string', message: 'Please select time', trigger: 'change' }],
        desc: [
          { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
          { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    subUpdate(attr) {
      //收到了子组件的更新
      Object.assign(this.attr, attr)
      this.updateAttribute()
    },
    updateAttribute() {
      // 内置项至少要保存一个
      if (this.attr.itemNum && this.attr.itemNum.value) {
        if (Number(this.attr.itemNum.value) < 1) {
          this.attr.itemNum.value = '1'
        }
      }
      //提交更新到父组件
      if (this.keyOfAttr) {
        
        this.$emit('update', {
          [this.keyOfAttr]: {
            children: this.attr,
          },
        })
      } else this.$emit('update', this.attr)
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    handleReset(name) {
      this.$refs[name].resetFields()
    },
  },
}
</script>
